<template>
  <div>
    <!-- 导航条 -->
    <ind-header />
    <div class="returnTop">
      <img src="../assets/returnTop.png" />
    </div>
    <div class="center">
      <!-- 返回顶部 -->

      <!-- 面包屑导航 -->
      <div class="crumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/store' }"
            >萌宠商城</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/' }">商品详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 上半 -->
      <div class="shop-top">
        <!-- 左侧 -->
        <div class="top-left">
          <!-- 大图 -->
          <div class="big-img">
            <img id="bigImg" :src="`/shop-imgs/shop0${activeImg}.png`" />
          </div>
          <!-- 小图 -->
          <div class="little-img">
            <span v-for="n in 4" :key="n" @mouseenter="changeImg(n)"
              ><img :src="`/shop-imgs/shop0${n}.png`"
            /></span>
          </div>
        </div>
        <!-- 中间 -->
        <div class="top-center">
          <h2>Paini 宠物便携拍照神器</h2>
          <div class="top-center-one">
            <div>
              <span>商城售价</span
              ><span class="one-span"
                ><span style="font-size: 16px">￥</span>28.00</span
              >
            </div>
            <div>
              <span>市场售价</span
              ><span><span style="font-size: 16px">￥</span>48.00</span>
            </div>
          </div>
          <p style="margin-left: 20px">
            简介简洁及简介 Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Ad sint delectus consectetur! Rem ullam possimus consequatur
            accusantium a ea? Laudantium voluptatibus assumenda repellendus
            earum vel molestiae repellat omnis at officia.
          </p>
          <div class="top-center-two">
            <p>库存：<span>123支</span></p>
            <p>
              运费：<span><em>￥</em>8元</span>
            </p>
            <div>
              <p>购买数量：</p>
              <!-- 下方接入数据库更改 -->
              <span class="center-two-1">
                <el-input-number
                  id="input-number"
                  v-model="num"
                  controls-position="right"
                  :precision="0"
                  :min="1"
                ></el-input-number>
              </span>
            </div>
          </div>
          <div class="top-center-three">
            <div @click="addCart">
              <img
                src="../assets/shop-car.png"
                style="width: 30px; height: 30px; vertical-align: middle"
              />
              加入购物车
            </div>
            <div>立即购买</div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="top-right">
          <div
            class="top-right-icon"
            style="background: url('/dian-ico.png') repeat-x center"
          >
            <h4>热门品牌</h4>
          </div>
          <div class="top-right-list">
            <div>
              <img src="/shop01.jpg" alt="" />
            </div>
            <p>简介简洁及简介</p>
            <span> <i>￥</i> 23元</span>
          </div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="shop-button">
        <!-- 左侧 -->
        <div class="button-left">
          <!-- 第一个 -->
          <div class="left-one">
            <div class="left-one-1">
              <img class="left-one-img img-1" src="../assets/dianpu_copy.png" />
              百脑汇
              <img class="left-one-img img-2" src="../assets/kefu.png" />
            </div>
            <div class="left-one-2">
              <div><img src="../assets/dianpu.png" alt="" /> 进店逛逛</div>
              <div><img src="../assets/star.png" alt="" /> 关注店铺</div>
            </div>
          </div>
          <!-- 第二个 -->
          <div class="left-two"></div>
        </div>
        <!-- 中间 -->
        <div class="button-center">
          <el-tabs v-model="activeName">
            <el-tab-pane class="but-right-one" label="详情介绍" name="first">
              <div class="but-right-01">
                <p>
                  由于狗粮较重，快递运输过程中可能会有极小比例的轻微破包，但是商品无质量问题。
                </p>
                <span
                  >请介意的亲务必在商品签收前开箱验货，如有问题请拒签，否则无法享受售后服务，感谢您的理解和支持！</span
                >
                <div>
                  <img src="/shop-imgs/shop01.png" alt="" />
                  <img src="/shop-imgs/shop01.png" alt="" />
                  <img src="/shop-imgs/shop01.png" alt="" />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="用户评价" name="second">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Recusandae corporis consequuntur a autem ad aspernatur qui
              corrupti dolorem quidem. Sunt perferendis nam corrupti provident
              sit accusamus natus laudantium quaerat in! Lorem ipsum, dolor sit
              amet consectetur adipisicing elit. Recusandae corporis
              consequuntur a autem ad aspernatur qui corrupti dolorem quidem.
              Sunt perferendis nam corrupti provident sit accusamus natus
              laudantium quaerat in! Lorem ipsum, dolor sit amet consectetur
              adipisicing elit. Recusandae corporis consequuntur a autem ad
              aspernatur qui corrupti dolorem quidem. Sunt perferendis nam
              corrupti provident sit accusamus natus laudantium quaerat in!
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Recusandae corporis consequuntur a autem ad aspernatur qui
              corrupti dolorem quidem. Sunt perferendis nam corrupti provident
              sit accusamus natus laudantium quaerat in!
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 右侧 -->
        <div class="button-right">
          <!-- 上方标题 -->
          <div
            class="but-right-icon"
            style="background: url('/dian-ico.png') repeat-x center"
          >
            <h4>为您推荐</h4>
          </div>
          <!-- 下方图片 -->
          <div class="but-right-list">
            <div>
              <img src="/shop01.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 页尾 -->
    <ind-footer />
  </div>
</template>

<script>
import IndHeader from "@/components/IndHeader.vue";
import IndFooter from "@/components/IndFooter.vue";
export default {
  components: { IndHeader, IndFooter },
  data() {
    return {
      num: 1,
      activeImg: 1,
      activeName: "first",
    };
  },
  methods: {
    addCart() {
      this.$router.push("/shopCar");
    },
    changeImg(n) {
      this.activeImg = n;
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 1440px;
  margin: 0 auto;
}
#bigImg {
  width: 100%;
  height: 100%;
}
.left-one-img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.img-1 {
  position: relative;
  margin-right: 4px;
  top: -3px;
}
.img-2 {
  position: relative;
  margin-left: 5px;
  top: -2px;
}
// 返回顶部
.returnTop {
  width: 50px;
  height: 50px;
  border: 2px solid #ad6e3f;
  background-color: #eee;
  border-radius: 50%;
  position: fixed;
  top: 80%;
  right: 1.5%;
  > img {
    width: 100%;
    height: 100%;
    transform: scale(0.5, 0.5);
  }
}
// 面包屑导航
.crumb {
  margin: 10px 0;
  width: 100%;
  vertical-align: middle;
}
// 上半
.shop-top {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: space-between;
  // 左侧
  .top-left {
    width: 400px;
    height: 100%;
    .big-img {
      width: 398px;
      height: 400px;
      border: 1px solid #ad6e3f;
    }
    .little-img {
      box-sizing: border-box;
      width: 100%;
      height: 110px;
      padding-top: 15px;
      border-bottom: 1px solid #ad6e3f;
      > span {
        border: 3px solid #ad6e3f;
        display: inline-block;
        position: relative;
        top: -11px;
        > img {
          width: 80px;
          height: 80px;
          vertical-align: bottom;
        }
      }
      > :first-child {
        margin: 10px;
      }
      > :nth-of-type(n + 2) {
        margin: 5px;
      }
      span:hover {
        opacity: 0.5;
      }
    }
  }
  // 中间
  .top-center {
    width: 700px;
    height: 100%;
    h2 {
      margin: 3px 0 15px;
    }
    .top-center-one {
      width: 100%;
      height: 100px;
      background-color: #eee;
      border-radius: 15px;
      > div {
        margin-left: 20px;
        > :first-child {
          margin-right: 5px;
        }
        .one-span {
          color: red;
          font-size: 38px;
        }
      }
      > :first-child {
        padding-top: 5px;
      }
      > :last-child {
        padding-top: 10px;
        margin-bottom: 10px;
      }
    }
    .top-center-two {
      width: 100%;
      height: 100px;
      padding: 10px 0 0 20px;
      > p {
        margin-bottom: 15px;
        span {
          margin-left: 5px;
        }
        em {
          font-style: normal;
        }
      }
      > :last-child {
        margin-top: 3px;
        p {
          display: inline;
        }
        > span > .but-center {
          display: inline;
          width: 30px;
          height: 25px;
          border: 1px solid black;
          margin: 0 5px;
          padding: 0 17px;
        }
      }
    }
    .top-center-three {
      user-select: none;
      display: flex;
      > :first-child {
        margin: 30px 0 0 15px;
        width: 160px;
      }
      > :last-child {
        margin: 30px 0 0 20px;
        width: 140px;
      }
      > div {
        height: 50px;
        line-height: 47px;
        background-color: #ad6e3f;
        border-radius: 7px;
        font-size: 20px;
        font-weight: 700;
        color: white;
        text-align: center;
        cursor: pointer;
        &:active {
          opacity: 0.7;
        }
      }
    }
  }
  // 右侧
  .top-right {
    width: 260px;
    height: 100%;
    .top-right-icon {
      overflow: hidden;
      width: 100%;
      text-align: center;
      margin-top: 5px;
      > h4 {
        display: inline;
        font-size: 21px;
        background-color: #fff;
        color: #555;
        padding: 0 20px;
      }
    }
    .top-right-list {
      width: 100%;
      text-align: center;
      > div {
        margin-top: 12px;
        > img {
          width: 250px;
          height: 250px;
        }
      }
      > p {
        margin: 5px 0;
        font-size: 14px;
      }
      > span {
        color: red;
        font-weight: 700;
        > i {
          font-style: normal;
          font-weight: normal;
        }
      }
    }
  }
}
// 下半
.shop-button {
  margin-top: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  // 左侧
  .button-left {
    width: 250px;
    // background-color: pink;
    .left-one {
      font-family: "宋体";
      // box-sizing: border-box;
      // border: 2px solid #ad6e3f;
      color: #eee;
    }
    .left-one-1 {
      vertical-align: middle;
      font-size: 20px;
      text-align: center;
      font-weight: bolder;
    }
    > .left-one > :first-child {
      width: 100%;
      height: 50px;
      background-color: #ad6e3f;
      line-height: 48px;
    }
    > .left-one > :last-child {
      width: 100%;
      height: 80px;
    }
    .left-one-2 {
      border: 1px solid #ad6e3f;
      text-align: center;
      > :last-child {
        margin-left: 17px;
      }
      > div {
        margin-top: 24px;
        display: inline-block;
        height: 100%;
        font-size: 14px;
        font-weight: bold;
        color: #ad6e3f;
        position: relative;
        top: 5px;
        > img {
          position: relative;
          top: -2px;
          right: -4px;
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  // 中间
  .button-center {
    width: 850px;
    min-height: 1000px;
    // background-color: yellow;
    .but-right-one {
      text-align: center;
      p {
        margin: 30px 0 8px;
      }
      .but-right-01 > div {
        margin-top: 20px;
      }
    }
  }
  // 右侧
  .button-right {
    width: 260px;
    height: 100%;
    .but-right-icon {
      overflow: hidden;
      width: 100%;
      text-align: center;
      margin-top: 5px;
      > h4 {
        display: inline;
        font-size: 21px;
        background-color: #fff;
        color: #555;
        padding: 0 20px;
      }
    }
    .but-right-list {
      width: 100%;
      height: 250px;
      margin-top: 10px;
      > div > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

// element 单独样式
<style>
.el-input-number {
  width: 60px;
  height: 40px;
}
.el-input-number__decrease,
.el-input-number__increase {
  width: 20px;
}
.el-input-number.is-controls-right .el-input__inner {
  padding-left: 11px;
  padding-right: 31px;
}
.el-tabs__header,
.el-tabs__nav-wrap,
.el-tabs__nav-wrap,
.el-tabs__item.is-top:nth-child(2) {
  height: 60px;
  margin: 0;
}
.el-tabs__item {
  line-height: 60px;
  font-size: 20px;
}
.el-tabs__item.is-active {
  color: #ad6e3f;
}
.el-tabs__active-bar {
  background-color: #ad6e3f;
}
</style>
